<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-23 17:36:42
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:16:47
 * @FilePath: \nien-vue3-admin\src\views\index\components\CorporateReporting.vue
 * @Description: 公司报表
-->
<template>
  <div ref="reportWrapperRef" class="report-wrapper" :class="{'isFull': isFull}">
    <div class="date-wrapper">
      <el-date-picker
        v-model="dateRange"
        class="picker" 
        type="daterange"
        value-format="YYYY-MM-DD"
        @change="getData"
      ></el-date-picker>
    </div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">公司报表</span>
          <div class="btn-box">
            <el-button v-show="showChart" :icon="Grid" @click="showChart = false"></el-button>
            <el-button v-show="!showChart" :icon="PieChart" @click="showChart = true"></el-button>
            <el-button :icon="isFull ? ZoomOut : ZoomIn" @click="handleFullScreen"></el-button>
          </div>
        </div>
      </template>
      <div v-show="showChart" class="chart-wrapper">
        <div id="chart1"></div> 
        <div id="chart2"></div> 
      </div>
      <div v-show="!showChart" class="table-wrapper">
        <div v-for="(item, index) in tableList" :key="index" class="table-box">
          <h3>{{ item.title }}</h3>
          <div>
            <el-table :data="item.warehouse">
              <el-table-column label="仓" prop="deptName" align="center"></el-table-column>
              <el-table-column label="应收" prop="totalAmountReceivable" align="center"></el-table-column>
              <el-table-column label="票数" prop="cabinetsNumber" align="center"></el-table-column>
              <el-table-column label="实重" prop="receivingTotalWeight" align="center"></el-table-column>
              <el-table-column label="体积" prop="receivingTotalWood" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import screenfull from 'screenfull'
import * as echarts from 'echarts'
import {
  Grid,
  PieChart,
  ZoomIn,
  ZoomOut,
} from '@element-plus/icons-vue'
import { receivingTotalWeightList, receivingTotalWoodList, initOption } from './pieChart'
import useWsStore from '@/store/modules/websocket'
import { parseTime } from '@/utils'

const reportWrapperRef = ref(null)

const cur = parseTime(new Date(), '{y}-{m}-{d}')
const dateRange = ref<[string, string]>([cur, cur])
const showChart = ref<boolean>(true)
const wsStore = useWsStore()

// ---------------- 饼图
const getData = () => {
  wsStore.send(wsStore.SIGN_MAP.INDEX_REPORT, {
    beginTime: dateRange.value[0],
    endTime: dateRange.value[1],
  })
}
getData()
// 接受ws初始化数据
wsStore.onMessage({ sign: wsStore.SIGN_MAP.INDEX_REPORT }, ({ data }) => {
  tableList.value = data.map(item => ({
    title: item.deptName,
    warehouse: item.warehouse,
  }))
  for (const p of data) {
    receivingTotalWeightList.value.forEach(item => {
      if (p.deptName.includes(item.name)) {
        item.children = p.warehouse.map(i => ({
          name: i.deptName,
          value: i.receivingTotalWeight,
        }))
      }
    })
    receivingTotalWoodList.value.forEach(item => {
      if (p.deptName.includes(item.name)) {
        item.children = p.warehouse.map(i => ({
          name: i.deptName,
          value: i.receivingTotalWood,
        }))
      }
    })
  }
  initChart()
})
let myChart1, myChart2

const initChart = () => {
  const option1 = initOption('实重', receivingTotalWeightList.value)
  const option2 = initOption('材积重', receivingTotalWoodList.value)
  if (!myChart1) {
    myChart1 = echarts.init(document.getElementById('chart1'))
  }
  myChart1.setOption(option1, true)
  if (!myChart2) {
    myChart2 = echarts.init(document.getElementById('chart2'))
  }
  myChart2.setOption(option2, true)
}

onMounted(() => {
  initChart()
})
const resize = (e) => {
  if (e.currentTarget.innerWidth < 860) {
    return
  }
  myChart1.resize()
  myChart2.resize()
}

document.addEventListener('resize', resize)
onBeforeUnmount(() => {
  document.removeEventListener('resize', resize)
})

// ------------------列表
const tableList = ref([
  {
    title: '华中事业部',
    warehouse: [],
  },
  {
    title: '华东事业部',
    warehouse: [],
  },
  {
    title: '华南事业部',
    warehouse: [],
  },
  {
    title: '华北事业部',
    warehouse: [],
  },
])
// 全屏
const isFull = ref(false)
const handleFullScreen = () => {
  if (screenfull.isEnabled) {
    isFull.value = !isFull.value 
    screenfull.toggle(reportWrapperRef.value)
  }
}

</script>

<style lang="less" scoped>
.report-wrapper{
  margin-bottom:16px;
  &.isFull{
  background-color: #FFFFFF;
  padding: 24px
}
}
   .date-wrapper {
     margin-bottom: 16px;
     /deep/ .el-date-editor{
      height: 48px;
      background: #FFFFFF;
      border-radius: 8px;
      border-radius: 8px;
      
    }
  }
  .el-card :deep(.el-card__body){
     padding: 16px
  }

  .table-wrapper{
    padding: 0 16px;
    h3{
       line-height: 48px;
       font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #010D19;
    }
    .table-box{
      margin-bottom: 16px;
    }
  }
  
 .chart-wrapper{
    display: flex;
    justify-content: space-around;
    > div{
       width: 400px;
       height: 400px;
       color: red;
    }
 }
 .card-header{
    display: flex;
    justify-content: space-between;
    .title{
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #010D19;
      line-height: 22px;
    }
    .btn-box{
      .el-button{
        padding: 4px;
        height:auto;
        &:hover,
        &:focus,
        &:visited,
        &:active{
          background: #E9EEF7;
          color: #000
        }
      }
    }
 }
</style>